<template>
  <div class="config-container">
    <el-form label-width="100px">
      <el-form-item label="数据集：">
        <el-select v-model="chart.dataset.datasetName" placeholder="请选择" class="w-100pc">
          <el-option v-for="item in datasets" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类属性：">
        <el-select v-model="chart.dataset.categoryProperty" placeholder="请选择" class="w-100pc">
          <el-option v-for="(item, index) in fields" :key="index" :label="item.name" :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="值属性：">
        <el-select v-model="chart.dataset.valueProperty" placeholder="请选择" class="w-100pc">
          <el-option v-for="(item, index) in fields" :key="index" :label="item.name" :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="系列值：">
        <el-radio v-model="chart.dataset.seriesType" label="property" @change="dataChange">属性</el-radio>
        <el-radio v-model="chart.dataset.seriesType" label="text" @change="dataChange">静态值</el-radio>
      </el-form-item>
      <el-form-item v-if="chart.dataset.seriesType==='text'" label="静态值：">
        <el-input v-model="chart.dataset.seriesText" type="text" placeholder="请输入" class="w-100pc" @change="dataChange"></el-input>
      </el-form-item>
      <el-form-item v-if="chart.dataset.seriesType==='property'" label="属性：">
        <el-select v-model="chart.dataset.seriesProperty" placeholder="请选择" class="w-100pc">
          <el-option v-for="(item, index) in fields" :key="index" :label="item.name" :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="聚合方式：">
        <el-select v-model="chart.dataset.collectType" placeholder="请选择聚合方式" class="w-100pc" @change="dataChange">
          <el-option v-for="item in aggregateList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    // 设计器对象
    designer: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 图形数据对象
    chart: {
      type: Object,
      default: () => {
        return {
          dataset: {}
        };
      }
    }
    // // 数据集集合
    // datasets: {
    //   type: Array,
    //   default: () => {
    //     return [];
    //   }
    // },
    // // 数据集字段集合
    // fields: {
    //   type: Array,
    //   default: () => {
    //     return [];
    //   }
    // }
  },
  data () {
    return {
      // 集合列表
      aggregateList: [
        {
          value: "select",
          label: "列表"
        },
        {
          value: "sum",
          label: "汇总"
        },
        {
          value: "count",
          label: "统计个数"
        },
        {
          value: "max",
          label: "最大值"
        },
        {
          value: "min",
          label: "最小值"
        },
        {
          value: "avg",
          label: "平均值"
        }
      ],
      fields: []
    };
  },
  computed: {
    datasets: function () {
      const { context } = this.designer;
      if (!context) return [];

      const datasources = context.reportDef.datasources;
      const sets = [];
      for (const ds of datasources) {
        const datasets = ds.datasets || [];
        for (const dataset of datasets) {
          sets.push(dataset.name);
        }
      }
      this.getFields(); // 获取字段集合

      return sets;
    }
  },
  methods: {
    dataChange () {},
    // 获取字段集合
    getFields () {
      const { context } = this.designer;
      const datasources = context.reportDef.datasources;
      let fields = [];
      const dsName = this.chart.dataset.datasetName;
      for (const ds of datasources) {
        const datasets = ds.datasets || [];
        for (const dataset of datasets) {
          if (dataset.name === dsName) {
            fields = dataset.fields || [];
            break;
          }
        }
        if (fields.length > 0) {
          break;
        }
      }

      this.fields = fields;
    }
  }
};
</script>

<style lang="scss" scoped>
.config-container {
  padding-bottom: 20px;
  .el-form-item {
    margin-bottom: 5px;
  }
  ::v-deep .el-form-item__label {
    padding: 0;
  }
}
</style>
